<template>
  <section>
    <div class="bii-box-section">
      <div class="bd-head">
        <div class="head-price">
          <div class="box">
            <div class="num">{{ money.money }}</div>
            <div>账户余额（元）</div>
          </div>
          <i class="line"></i>
          <div class="box">
            <div class="num">{{ money.waitSettleMoney }}</div>
            <div>待结算（元）</div>
          </div>
        </div>
        <el-alert style="width: 359px; margin: 13px 0px 8px;" title="订单状态为已完成，金额自动结算到店铺余额中" type="error">
        </el-alert>

      </div>

      <el-form :inline="true" :model="listQuery" style="margin-top:20px;">
        <el-form-item label="">
          <el-select class="w100" size="mini" v-model="listQuery.type">
            <el-option label="创建日期" value="1"></el-option>
            <el-option label="结算日期" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-if="listQuery.type == '1'">
          <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="date" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" v-if="listQuery.type == '2'">
          <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="date2" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-select placeholder="结算状态" class="w100" size="mini" v-model="listQuery.settleStatus" clearable>
            <el-option label="待结算" value="1"></el-option>
            <el-option label="已结算" value="5"></el-option>
            <el-option label="已失效" value="10"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <common-input style="width:150px;" placeholder="订单号" v-model="listQuery.orderNo" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
          <el-button size="mini" @click="exportExcel">导出明细</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="dataTable" :data="list" style="width: 100%">
        <el-table-column align="center" label="创建时间" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.createdAt }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="来源" prop="partnerName">
          <template slot-scope="scope">
            <span>{{ scope.row.partnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="收益比例" prop="partnerRate">
          <template slot-scope="scope">
            <span>{{ scope.row.partnerRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结算时间" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.settleTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结算状态">
          <template slot-scope="scope">
            <span>{{ scope.row.settleStatusText }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="结算金额" width="100">
          <template slot-scope="scope">
            <span>￥{{ scope.row.settleAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单号" width="180">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.orderNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="三方订单号" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.outOrderNo }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="商品">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.attribute }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="下单数量" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.quantity }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="listQuery.pageNum" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import {
  agency_money
} from '../../api/agency';
import {
  order_settle_list,
  order_settle_list_export
} from '../../api/order';
export default {
  components: {
  },
  data() {
    return {

      listQuery: {
        startDate: undefined,
        endDate: undefined,
        settleStartDate: undefined,
        settleEndDate: undefined,
        settleStatus: undefined,
        pageNum: 1,
        pageSize: 20,
        orderNo: undefined,
        type: "1"
      },
      list: [],
      total: 0,
      date: undefined,
      date2: undefined,
      money: {
        money: 0,
        settledMoney: 0,
        waitSettleMoney: 0,
      }
    }
  },
  mounted() {

  },
  created() {
    this.handleFilter();
    this.getMoney();
  },
  methods: {
    dialogClose() {
      this.$refs.form.resetFields();
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    check(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.checkLoading = true;
          agency_update_bank(this.form).then((res) => {
            this.checkLoading = false;
            this.$message.success("银行卡信息已更新");
            this.getAgencyInfo();
            this.dialogFormVisible = false;
          }).catch((err) => {
            this.checkLoading = false;
          })
        } else {
          return false;
        }
      });
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    getList() {
      if (this.listQuery.type == "1") {
        if (this.date) {
          this.listQuery.startDate = this.date[0];
          this.listQuery.endDate = this.date[1];
        } else {
          this.listQuery.startDate = undefined;
          this.listQuery.endDate = undefined;
        }
        this.listQuery.settleStartDate = undefined;
        this.listQuery.settleEndDate = undefined;
      } else if (this.listQuery.type == "2") {
        if (this.date2) {
          this.listQuery.settleStartDate = this.date2[0];
          this.listQuery.settleEndDate = this.date2[1];
        } else {
          this.listQuery.settleStartDate = undefined;
          this.listQuery.settleEndDate = undefined;
        }
        this.listQuery.startDate = undefined;
        this.listQuery.endDate = undefined;
      }
      order_settle_list(this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
      })
    },
    getMoney() {
      agency_money().then((res) => {
        this.money = res.data
      }).catch((err) => {

      })
    },
    handleDetail(row) {
      let { href } = this.$router.resolve({ path: '/order_detail?id=' + row.orderId });
      window.open(href, '_blank');

    },
    createCellPos(n) {
      var ordA = 'A'.charCodeAt(0);

      var ordZ = 'Z'.charCodeAt(0);

      var len = ordZ - ordA + 1;

      var s = "";



      while (n >= 0) {

        s = String.fromCharCode(n % len + ordA) + s;

        n = Math.floor(n / len) - 1;

      }

      return s;

    },
    exportExcel() {
      order_settle_list_export(this.listQuery).then((res) => {
        if (res.data.items && res.data.items.length > 0) {
          let items = res.data.items;

          let export_config = res.data.exportConfig;
          items.unshift(export_config.header)

          var column = null;
          eval("column = " + export_config.columnJs);
          console.log(column)
          let export_data = LAY_EXCEL.filterExportData(items, column);
          let sheet_data = new Object();
          eval("sheet_data." + res.data.sheet + "=export_data;");
          let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

          LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
            s: {
              fill: { fgColor: { rgb: "FFFF00" } },
              alignment: {
                horizontal: 'center',
                vertical: 'center'
              },
              font: {
                sz: 12,
                bold: true
              }
            }
          });

          LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
            extend: {
              '!merges': export_config.mergeCells,
              '!cols': export_config.width,
              '!rows': LAY_EXCEL.makeRowConfig({
                1: 40
              })
            }
          });
        } else {
          this.$message.error("导出数据为空");
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.bii-box-section {
  // padding: 80px;
  height: 100%;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;

  .bd-head {
    position: relative;

    .head-price {
      font-size: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      line-height: 16px;
      text-align: center;
      margin-bottom: 30px;

      .num {
        font-size: 34px;
        line-height: 36px;
      }

      .line {
        height: 66px;
        width: 1px;
        background: #d8d8d8;
        margin: 0 75px;
      }
    }
  }


}
</style>
